<template>
  <div class="app-container">
    <div style="position: absolute; margin: 20px;">
      <el-button
        @click="addTier"
        type="primary"
        size="small"
      >新增层级一</el-button>
      <el-button
        @click="exportExcel"
        size="small"
      >导出excel</el-button>
    </div>

    <SimpleDataSelect
      :search-data="search"
      @return-search="searchList"
    ></SimpleDataSelect>
    <el-table
      :data="tableData"
      style="margin:20px;width:100%"
      row-key="id"
      :header-cell-style="{textAlign: 'left',background:'#F5F5F5',color:'#606266'}"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column
        min-width
        v-for="(item, index) in tableList"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      ></el-table-column>
      <el-table-column
        class="action"
        label="操作"
      >
        <template slot-scope="scope">
          <span
            class="table-action"
            @click="
              handleClick(convertToChinaNum(scope.row.leve + 1), scope.row)
            "
            type="text"
          >新增层级{{ convertToChinaNum(scope.row.leve + 1) }}</span>
          <span
            class="table-action"
            @click="updateClick(scope.row)"
            type="text"
          >编辑</span>
          <span
            class="table-action"
            @click="downloadImg(scope.row)"
            type="text"
          >删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div
      class="flex-between page"
      style="margin-top:-25px;padding-left: 15px;"
    >
      <el-pagination
        @size-change="handleSizeChange"
        :page-sizes="[5,10, 20, 50]"
        :page-size="pagination.pageSize"
        layout="total, sizes"
        :total="pagination.total"
      ></el-pagination>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-size="pagination.pageSize"
        layout=" prev, pager, next"
        :total="pagination.total"
      ></el-pagination>
    </div>

    <DataDialog
      ref="dialog"
      :dialog-visible.sync="dialogVisible"
      :dialog-data="dialogData"
      :dialog-title="dialogTitle"
      :confirmFunc="confirm"
      :dialog-rule="dialogRule"
    >
    </DataDialog>
  </div>
</template>

<script>
import mixin from "@/components/mixin/mixin.js";

export default {
  name: "HelloWorld",
  components: {},
  mixins: [mixin],
  methods: {
    //页码发生变化
    handleCurrentChange(data) {
      console.log(data);
      this.pagination.pageNum = data;
      //查询
      console.log(this.pagination)
    },
    //每页条数发生变化
    handleSizeChange(data) {
      console.log(data);
      this.pagination.pageSize = data;
      //查询
       console.log(this.pagination)
    },
    //导出excel
    exportExcel() {},
    //新增层级一
    addTier() {
      this.dialogVisible = true;
      this.dialogTitle = "货品类别-新增层级一";
      this.dialogData = [
        {
          key: "className",
          label: "类别名称",
          type: "input",
          required: true
        },
        {
          key: "sort",
          label: "序号",
          type: "input"
        },
        {
          key: "category",
          label: "类别类型",
          type: "select",
          optionLabel: 'label',
          optionValue: 'value',
           options: [
             {
              label: "是",
              value: '1',
            },
            {
              label: "否",
              value: '0',
            }
            
          ]
        },
        {
          key: "remark",
          label: "描述",
          type: "textarea",
          fullWidth: true
        }
      ];
      this.dialogRule = {
        className: [
          {
            required: true,
            message: "请输入类别名称"
          }
        ],
        sort: [
          {
            validator: this.sortPass,
            trigger: "blur"
          }
        ]
      };
    },
    //搜索条件
    searchList(value) {
      console.log(value);
    },
    //编辑
    updateClick(data) {
      console.log(data);
      this.dialogVisible = true;
      this.dialogTitle = "编辑";
      //给弹框的from声明值
      this.$refs.dialog.form = {
        leaveRelation: data.className,
        remark: data.remark,
        ShouldComp: data.ShouldComp,
        ShouldYieldUp: data.ShouldYieldUp,
        ShouldYieldDown: data.ShouldYieldDown,
        sort: data.sort,
        className: data.className
      };
      this.dialogData = [
        {
          key: "className",
          label: "类别名称",
          type: "input",
          required: true
        },
        {
          key: "sort",
          label: "序号",
          type: "input"
        },
        {
          key: "ShouldYieldDown",
          label: "应产率达标下限",
          type: "input"
        },
        {
          key: "ShouldYieldUp",
          label: "应产率达标上限",
          type: "input"
        },
        {
          key: "ShouldComp",
          label: "是否计算舀球率",
          type: "select",
          required: true,
          options: {
            optionLabel: "是",
            optionValue: "否"
          }
        },
        {
          key: "leaveRelation",
          label: "层级关系",
          type: "input"
        },
        {
          key: "remark",
          label: "描述",
          type: "textarea",
          fullWidth: true
        }
      ];
      this.dialogRule = {
        className: [
          {
            required: true,
            message: "请输入类别名称"
          }
        ],
        ShouldYieldUp: [
          {
            validator: this.ShouldYieldUpPass,
            trigger: "blur"
          }
        ],
        ShouldYieldDown: [
          {
            validator: this.ShouldYieldDownPass,
            trigger: "blur"
          }
        ],
        sort: [
          {
            validator: this.sortPass,
            trigger: "blur"
          }
        ],
        ShouldComp: [
          {
            message: "请选择舀球率",

            required: true
          }
        ]
      };
    },
    //删除
    downloadImg(data) {
      console.log(data);
    },
    //新增层级
    handleClick(data, row) {
      console.log(row);
      this.dialogVisible = true;
      this.dialogTitle = "货品类别-新增层级" + data;
      //新增层级给弹框赋值
      this.dialogData = [
        {
          key: "className",
          label: "类别名称",
          type: "input",
          required: true
        },
        {
          key: "sort",
          label: "序号",
          type: "input"
        },
        {
          key: "ShouldYieldDown",
          label: "应产率达标下限",
          type: "input"
        },
        {
          key: "ShouldYieldUp",
          label: "应产率达标上限",
          type: "input"
        },
        {
          key: "ShouldComp",
          label: "是否计算舀球率",
          type: "select",
          required: true,
          options: {
            optionLabel: "是",
            optionValue: "否"
          }
        },
        {
          key: "leaveRelation",
          label: "层级关系",
          type: "input",
          disabled: true
        },
        {
          key: "remark",
          label: "描述",
          type: "textarea",
          fullWidth: true
        }
      ];
      //新增层级给弹框加校验
      this.dialogRule = {
        className: [
          {
            required: true,
            message: "请输入类别名称"
          }
        ],
        ShouldYieldUp: [
          {
            validator: this.ShouldYieldUpPass,
            trigger: "blur"
          }
        ],
        ShouldYieldDown: [
          {
            validator: this.ShouldYieldDownPass,
            trigger: "blur"
          }
        ],
        sort: [
          {
            validator: this.sortPass,
            trigger: "blur"
          }
        ],
        ShouldComp: [
          {
            message: "请选择舀球率",

            required: true
          }
        ]
      };
      //给弹框的from声明值
      this.$refs.dialog.form = {
        leaveRelation: row.className,
        remark: "",
        ShouldComp: "",
        ShouldYieldUp: "",
        ShouldYieldDown: "",
        sort: "",
        className: ""
      };
    },
    confirm(data) {
      debugger;
      console.log("ssssss");
      console.log(data);
    },
    //数字转大写方法
    convertToChinaNum(num) {
      var arr1 = new Array(
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九"
      );
      var arr2 = new Array(
        "",
        "十",
        "百",
        "千",
        "万",
        "十",
        "百",
        "千",
        "亿",
        "十",
        "百",
        "千",
        "万",
        "十",
        "百",
        "千",
        "亿"
      ); //可继续追加更高位转换值
      if (!num || isNaN(num)) {
        return "零";
      }
      var english = num.toString().split("");
      var result = "";
      for (var i = 0; i < english.length; i++) {
        var des_i = english.length - 1 - i; //倒序排列设值
        result = arr2[i] + result;
        var arr1_index = english[des_i];
        result = arr1[arr1_index] + result;
      } //将【零千、零百】换成【零】 【十零】换成【十】
      result = result.replace(/零(千|百|十)/g, "零").replace(/十零/g, "十"); //合并中间多个零为一个零
      result = result.replace(/零+/g, "零"); //将【零亿】换成【亿】【零万】换成【万】
      result = result.replace(/零亿/g, "亿").replace(/零万/g, "万"); //将【亿万】换成【亿】
      result = result.replace(/亿万/g, "亿"); //移除末尾的零
      result = result.replace(/零+$/, ""); //将【零一十】换成【零十】 //result = result.replace(/零一十/g, '零十');//貌似正规读法是零一十 //将【一十】换成【十】
      result = result.replace(/^一十/g, "十");
      return result;
    }
  },

  data() {
    var ShouldYieldUpPass = (rule, value, callback) => {
      if (value) {
        if (!/^[0-9]*$/.test(value)) {
          callback(new Error("请输入数字"));
        }
      }
    };
    var ShouldYieldDownPass = (rule, value, callback) => {
      if (value) {
        if (!/^[0-9]*$/.test(value)) {
          callback(new Error("请输入数字"));
        }
      }
    };
    var sortPass = (rule, value, callback) => {
      if (value) {
        if (!/^[0-9]*$/.test(value)) {
          callback(new Error("请输入数字"));
        }
      }
    };
    return {
      //分页参数

      //新增其他层级校验
      dialogRule: {},
      //控制弹框时候开启
      dialogVisible: false,
      //弹框标头
      dialogTitle: "",
      //弹框数据
      dialogData: [],
      search: {
        //搜索条件
        key: "className",
        value: "",
        label: "请输入类别名称"
      },
      tableList: [
        {
          label: "类别名称",
          prop: "className"
        },
        {
          label: "描述",
          prop: "describe"
        },
        {
          label: "排序号",
          prop: "sort"
        }
      ],
      tableData: [
        {
          id: 1,
          className: "营运货品类别",
          describe: "",
          sort: "10",
          leve: 1,
          children: [
            {
              id: 2,
              className: "nove",
              describe: "-",
              sort: "20",
              leve: 2,
              children: []
            }
          ]
        },
        {
          id: 3,
          className: "配销货品类别",
          describe: "",
          sort: "10",
          leve: 1,
          children: [
            {
              id: 4,
              className: "novesss",
              describe: "-",
              sort: "20",
              leve: 2,
              children: [
                {
                  id: 5,
                  className: "novesss",
                  describe: "-",
                  sort: "20",
                  leve: 3,
                  children: []
                }
              ]
            }
          ]
        }
      ]
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.table-action {
  border-left: 1px solid #efedf0;
  padding: 0 10px;
  font-size: 13px;
  cursor: pointer;
  color: #1890ff;
}

.cell span:first-of-type {
  border-left: none;
  padding-left: 0px;
}
</style>

<style scoped>
.el-table .cell > .drop {
  width: 5px;
  height: 5px;
  background-color: #67c23a;
  border-radius: 5px;
  vertical-align: middle;
}
